import {rebutPmProgress, selectRebutProgress} from '@/api/myPerformance'
import {useLoading} from '@/hooks/loading'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {ant_design_vue} from '@/libs/global/antDesignVue'
import {computed, defineComponent, PropType, reactive, watch} from 'vue'
const {message} = ant_design_vue
export const DrawerContent = defineComponent({
  setup(props, {slots}) {
    return () => (
      <div class='custom-drawerContent w-full h-full relative p-16 overflow-hidden pb-60'>
        {slots.default?.()}
      </div>
    )
  }
})

export const DrawerFooter = defineComponent({
  setup(props, {slots}) {
    return () => (
      <div class='w-full h-60 absolute bottom-0 left-0 bg-white border-t-1 border-cardLine p-12 z-10'>
        {slots.default?.()}
      </div>
    )
  }
})

const RejectProgressDrawer = defineComponent({
  name: 'RejectProgress',
  props: {
    title: {
      type: String,
      default: '驳回'
    },
    placement: {
      type: String as PropType<'top' | 'right' | 'bottom' | 'left'>,
      default: 'right'
    },
    visible: {
      type: Boolean,
      deafult: false
    },
    rejectNowPmProgressId: Number
  },
  emits: {
    'update:visible': (data: boolean): boolean => true
  },
  setup(props, {emit}) {
    const {router, store, route} = useGlobalAPI()
    const {loading, startLoading, closeLoading} = useLoading()
    const loginUserInfo = computed(() => store.getters['dingding/ddUserInfo'])
    let state = reactive<{
      visible: boolean
      rebutProgressList: MyPm.PmProgress[]
      currentRebutProgressId: number | undefined
      rebutCause: string
    }>({
      visible: false,
      rebutProgressList: [],
      currentRebutProgressId: undefined,
      rebutCause: ''
    })

    const rebutProgressOptions = computed(() =>
      state.rebutProgressList.map((item, idx) => ({
        label: `${idx + 1}.${item.pmProgressName}:${item.makeUserName}`,
        value: item.pmProgressId
      }))
    )

    const currentRebutProgress = computed(() =>
      state.rebutProgressList.find(item => item.pmProgressId === state.currentRebutProgressId)
    )

    watch(
      () => props.visible,
      n => {
        state.visible = n
      },
      {immediate: true}
    )

    watch(
      () => state.visible,
      n => {
        if (!n) {
          state.currentRebutProgressId = undefined
        }
        emit('update:visible', n)
      }
    )

    watch(
      () => [props.rejectNowPmProgressId],
      n => {
        if (n[0]) {
          getPageData()
        }
      },
      {
        immediate: true
      }
    )

    function handleConfirm() {
      if (loading.value) return

      if (!currentRebutProgress.value) {
        message.warning('请选择驳回到哪一步')
        return
      }

      if (!props.rejectNowPmProgressId) {
        message.warning('当前流程信息故障')
        return
      }

      startLoading()
      rebutPmProgress({
        makeUserDDId: loginUserInfo.value.userId,
        nowPmProgressId: props.rejectNowPmProgressId,
        rebutPmProgressId: currentRebutProgress.value.pmProgressId,
        rebutCause: state.rebutCause
      })
        .then(res => {
          closeLoading()
          location.reload()
        })
        .catch(err => {
          closeLoading()
          location.reload()
        })
    }

    function getPageData() {
      if (!props.rejectNowPmProgressId) return

      selectRebutProgress({
        userDDId: loginUserInfo.value.userId,
        nowPmProgressId: props.rejectNowPmProgressId
      })
        .then(res => {
          state.rebutProgressList = res.data.sort((a, b) => a.sort - b.sort)
          state.currentRebutProgressId = undefined
          state.rebutCause = ''
        })
        .catch(err => {})
    }

    return () => (
      <a-drawer
        v-model={[state.visible, 'visible']}
        title={props.title}
        placement={props.placement}
        width={500}
      >
        <DrawerContent>
          <a-form-item label='驳回到' required>
            <a-select
              v-model={[state.currentRebutProgressId, 'value']}
              options={rebutProgressOptions.value}
            ></a-select>
          </a-form-item>
          <a-form-item label='原因：'>
            <a-textarea v-model={[state.rebutCause, 'value']}></a-textarea>
          </a-form-item>
          <DrawerFooter>
            <div class='flex items-center justify-end gap-x-12'>
              <a-button loading={loading.value} onClick={() => (state.visible = false)}>
                取消
              </a-button>
              <a-button
                class='bg-primary text-white'
                loading={loading.value}
                type='primary'
                onClick={handleConfirm}
              >
                确认
              </a-button>
            </div>
          </DrawerFooter>
        </DrawerContent>
      </a-drawer>
    )
  }
})

export default RejectProgressDrawer
